<template>
	<view class="main">
		<view class="input">
			<view class="title">转盘标题</view>
			<view class="input-main">
				<u-input placeholder="请输入转盘名称" v-model="turnTitle">
					<template slot="prefix">
						<u-icon name="close" color="#f80000" size="18"></u-icon>
					</template>
				</u-input>
			</view>
		</view>
		<view class="input">
			<view class="title">转盘选项（{{turnArr.length}}）</view>
			<view class="input-main" v-for="(item,index) in turnArr" :key="item">
				<u-input placeholder="请输入转盘名称" v-model="item.turnName">
					<template slot="prefix">
						<u-icon name="close" color="#f80000" size="18" @click="clearInput(index)"></u-icon>
					</template>
				</u-input>
				<span class="color" @click="selectColor(index)" :style="{backgroundColor: item.bgc}"></span>
				<u-icon name="more-dot-fill" color="#666" size="26" @click="openBotton(item.range,index)"></u-icon>
			</view>
			<view class="additem input-main" @click="addItem"> <u-icon name="plus-circle" color="#1c90ff"
					size="28"></u-icon><span>添加新选项</span></view>
		</view>
		<view class="savebtn" @click="save">保存</view>
		<!--颜色选择-->
		<u-popup :show="show" mode="left" @close="close" @open="open">
			<ul class="colorPopup">
				<li :style="{backgroundColor: item}" v-for="item in colorArr" :key="item" @click="itemColor(item)"></li>
			</ul>
		</u-popup>
		<!-- 更多功能 -->
		<u-popup :show="bottomshow" mode="bottom" @close="bottomclose">
			<view class="bottomPopup">
				<view class="title">概率配置</view>
				<view class="range-num">权重 <span>{{currentRange}}</span> </view>
				<view class="range-num">占比 <span>{{currentRange}}/{{totalRange}}</span> </view>
				<view class="range-num">概率 <span>{{percent}}</span> </view>
				<u-number-box v-model="currentRange" :min="0" @change='changerange'>
					<view slot="minus" class="minus">
						<u-icon name="minus" size="12"></u-icon>
					</view>
					<text slot="input" style="width: 50px;text-align: center;" class="input">{{currentRange}}</text>
					<view slot="plus" class="plus">
						<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
					</view>
				</u-number-box>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		addTurn,
		editTurn
	} from '../../request/user.js'
	import colorsArr from '../../common/color.js'
	export default {
		data() {
			return {
				turnTitle: "",
				currentRange: 3,
				currentIndex: null,
				show: false,
				bottomshow: false,
				editDate: {},
				turnArr: [{
						turnName: '',
						bgc: '#da7c7a',
						range: 1
					},
					{
						turnName: '',
						bgc: '#f2e283',
						range: 1
					},
					{
						turnName: '',
						bgc: '#afe6be',
						range: 1
					},
				],
				colorArr: colorsArr
			};
		},
		computed: {
			totalRange() {
				return this.turnArr.reduce((s, i) => {
					return s += i.range
				}, 0)
			},
			percent() {
				return (Number(this.currentRange) / Number(this.totalRange)).toFixed(2)
			},
		},
		onLoad(option) {
			console.log('colorsArr', colorsArr)
			console.log('上一个页面传递过来的参数对象', option)
			if (option && option.tableinfo) {
				const item = JSON.parse(decodeURIComponent(option.tableinfo));
				console.log('上一个页面传递过来的参数对象', item)
				this.editDate = item
				this.turnTitle = this.editDate.turntablesDates.turnTitle
				this.turnArr = this.editDate.turntablesDates.turnInfo
				uni.setNavigationBarTitle({
					title: '编辑转盘'
				})
			}

		},
		methods: {
			clearInput(index) {
				this.turnArr.splice(index, 1)
			},
			addItem() {
				this.turnArr.push({
					turnName: '',
					bgc: this.colorArr[this.turnArr.length + 1],
					range: 1
				})
			},
			async save() {
				console.log('this.turnArr', this.turnTitle, this.turnArr)
				console.log('data', {
					turnTitle: this.turnTitle,
					turnInfo: this.turnArr
				})
				if (!this.turnTitle) {
					this.$refs.uToast.show({
						message: '转盘标题为必填选项~',
						type: 'default',
						duration: 1500,
						position: 'top',
					})
					return
				}
				console.log('uni.getStorageSy', uni.getStorageSync('openid'))
				let res;
				if (this.editDate.type && this.editDate.type === "edit") {
					console.log("edit")
					res = await editTurn(this.editDate._id, {
						opend: this.editDate.opend,
						turntablesDates: {
							turnTitle: this.turnTitle,
							turnInfo: this.turnArr
						}
					})
				} else {
					res = await addTurn({
						openid: uni.getStorageSync('openid'),
						turntablesDates: {
							turnTitle: this.turnTitle,
							turnInfo: this.turnArr
						}
					})
				}
				console.log(res, "res")
				if (res.status === 200) {
					this.$refs.uToast.show({
						message: '保存成功~',
						type: 'success',
						duration: 1500,
						position: 'top',
						complete() {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					})
				}

			},
			selectColor(index) {
				this.show = true
				this.currentIndex = index
			},
			itemColor(item) {
				console.log('itemColor', item)
				this.show = false
				this.turnArr[this.currentIndex].bgc = item
			},
			open() {
				console.log('open');
			},
			close() {
				this.show = false
				console.log('close');
			},
			openBotton(range, index) {
				this.bottomshow = true
				this.currentRange = range
				this.currentIndex = index
				console.log(range)
			},
			bottomclose() {
				this.bottomshow = false
			},
			changerange(item) {
				this.turnArr[this.currentIndex].range = item.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #f6f7f8;
		box-sizing: border-box;
		padding: 10rpx 20rpx;

		.input {
			width: 100%;
			background-color: #fff;
			padding: 30rpx 20rpx;
			border-radius: 20rpx;
			box-sizing: border-box;

			.title {
				font-weight: bold;
			}

			.input-main {
				background-color: #eee;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				padding: 10rpx 30rpx 10rpx 10rpx;
				margin-top: 20rpx;

				.color {
					width: 55rpx;
					height: 55rpx;
					// background-color: #890;
					border-radius: 10rpx;
					margin-right: 30rpx;
				}
			}

			.additem {
				display: flex;
				padding: 20rpx 40rpx;

				span {
					color: #1c90ff;
					margin-left: 30rpx;
				}
			}
		}

		.savebtn {
			color: #fff;
			background-color: #1c90ff;
			text-align: center;
			padding: 20rpx 0px;
			border-radius: 50rpx;
			font-size: 32rpx;
			font-weight: bold;
			box-sizing: border-box;
			cursor: pointer;
		}
	}

	.colorPopup {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		width: 580rpx;

		li {
			width: 90rpx;
			height: 90rpx;
			margin: 25rpx;
			border-radius: 10rpx;
		}
	}

	.bottomPopup {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10rpx 0 50rpx;

		.range-num {
			width: 40%;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
		}

		.title {
			margin: 20rpx 0rpx;
			font-size: 38rpx;
			font-weight: bold;
		}
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>